<template>
  <div
    v-if="middleCard"
    class="middleCard"
    @click="toArticle(middleCard.children[0].model.resource.id)"
  >
    <div class="img">
      <van-image
        width="176px"
        height="100px"
        lazy-load
        :src="middleCard.children[0].model.resource.cover"
        radius="10px 10px 0 0"
      />
      <div class="countBox">
        <div>
          <svg
            t="1677140094156"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5302"
            width="16"
            height="16"
          >
            <path
              d="M515.2 224c-307.2 0-492.8 313.6-492.8 313.6s214.4 304 492.8 304 492.8-304 492.8-304S822.4 224 515.2 224zM832 652.8c-102.4 86.4-211.2 140.8-320 140.8s-217.6-51.2-320-140.8c-35.2-32-70.4-64-99.2-99.2-6.4-6.4-9.6-12.8-16-19.2 3.2-6.4 9.6-12.8 12.8-19.2 25.6-35.2 57.6-70.4 92.8-102.4 99.2-89.6 208-144 329.6-144s230.4 54.4 329.6 144c35.2 32 64 67.2 92.8 102.4 3.2 6.4 9.6 12.8 12.8 19.2-3.2 6.4-9.6 12.8-16 19.2C902.4 585.6 870.4 620.8 832 652.8z"
              p-id="5303"
              fill="#ffffff"
            ></path>
            <path
              d="M512 345.6c-96 0-169.6 76.8-169.6 169.6 0 96 76.8 169.6 169.6 169.6 96 0 169.6-76.8 169.6-169.6C681.6 422.4 604.8 345.6 512 345.6zM512 640c-67.2 0-121.6-54.4-121.6-121.6 0-67.2 54.4-121.6 121.6-121.6 67.2 0 121.6 54.4 121.6 121.6C633.6 582.4 579.2 640 512 640z"
              p-id="5304"
              fill="#ffffff"
            ></path>
          </svg>
          <span>{{
            middleCard.children[0].model.resource.count.count_view | formatter
          }}</span>
        </div>
        <div>
          <svg
            t="1677140255784"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="11573"
            width="16"
            height="16"
          >
            <path
              d="M779.2 881.6h-44.8c-17.6 0-32-14.4-32-32s14.4-32 32-32h44.8c4.8 0 51.2-1.6 62.4-28.8 14.4-36.8 72-264 92.8-347.2 3.2-12.8 11.2-49.6 0-62.4-4.8-4.8-14.4-6.4-20.8-6.4H649.6c-17.6 0-32-14.4-32-32s14.4-32 32-32H912c38.4 0 60.8 16 70.4 30.4 30.4 36.8 17.6 91.2 12.8 116.8v1.6c-8 32-76.8 307.2-94.4 355.2-19.2 51.2-76.8 68.8-121.6 68.8z"
              fill="#ffffff"
              p-id="11574"
            ></path>
            <path
              d="M331.2 480c-12.8 0-24-8-30.4-20.8-6.4-16 1.6-35.2 17.6-41.6 24-9.6 44.8-27.2 57.6-49.6l8-14.4c35.2-62.4 57.6-134.4 67.2-214.4 1.6-11.2 4.8-20.8 6.4-27.2 9.6-27.2 46.4-56 92.8-59.2 30.4-1.6 86.4 8 126.4 92.8 64 136 0 212.8-3.2 216-11.2 12.8-32 14.4-44.8 3.2-12.8-11.2-14.4-32-3.2-44.8 1.6-1.6 38.4-51.2-6.4-147.2-11.2-24-32-54.4-60.8-56-20.8-1.6-36.8 11.2-40 17.6 0 0-1.6 4.8-1.6 14.4-9.6 88-35.2 168-75.2 238.4l-8 12.8c-19.2 35.2-51.2 64-89.6 78.4-4.8 1.6-8 1.6-12.8 1.6zM777.6 881.6H500.8c-20.8 0-40-3.2-59.2-11.2-52.8-19.2-128-48-128-48l22.4-59.2 128 48c11.2 4.8 24 6.4 36.8 6.4h276.8c17.6 0 32 14.4 32 32s-14.4 32-32 32z"
              fill="#ffffff"
              p-id="11575"
            ></path>
            <path
              d="M294.4 902.4H97.6c-30.4 0-54.4-25.6-54.4-56V393.6c0-27.2 20.8-65.6 54.4-65.6h196.8c20.8 0 46.4 17.6 46.4 65.6v452.8c0 41.6-24 56-46.4 56z m-187.2-64h169.6V393.6v-1.6H107.2V838.4z"
              fill="#ffffff"
              p-id="11576"
            ></path>
          </svg>
          <span>
            {{
              middleCard.children[0].model.resource.count.count_like | formatter
            }}
          </span>
        </div>
        <div>
          {{ middleCard.children[0].model.resource.duration | time }}
        </div>
      </div>
    </div>
    <div class="resource">
      <div class="title">
        {{ middleCard.children[0].model.resource.title }}
      </div>
      <div class="buttom">
        <div class="username">
          <!-- <div
            class="username"
            @click.stop="
              toUser(middleCard.children[0].model.resource.author.userinfo.id)
            "
          > -->
          {{ middleCard.children[0].model.resource.author.userinfo.username }}
        </div>
        <div class="share" @click.stop="share">
          <svg
            t="1677136516616"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4040"
            width="16"
            height="16"
          >
            <path
              d="M512 704c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m-64-192c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z m0-256c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z"
              p-id="4041"
              fill="#999999"
            ></path>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  props: ["middleCard"],
  methods: {
    toArticle(id) {
      this.$router.push({
        path: "/article",
        query: { id },
      });
    },
    // toUser(id) {
    //   this.$router.push({
    //     path: "/user",
    //     query: { userid: id },
    //   });
    // },
    ...mapMutations(["changeShare"]),
    share() {
      // console.log("share");
      this.changeShare();
    },
  },
  filters: {
    time: function (text) {
      let minute =
        Math.floor(text / 60) < 10
          ? `0${Math.floor(text / 60)}`
          : Math.floor(text / 60);
      let second = text % 60 < 10 ? `0${text % 60}` : text % 60;
      return `${minute}'${second}''`;
    },
    formatter: function (value) {
      if (value >= 1000 && value < 10000) {
        value = (value / 1000).toFixed(1) + "k";
      }
      if (value >= 10000 && value < 10000000) {
        value = (value / 10000).toFixed(1) + "w";
      }
      return value;
    },
  },
};
</script>

<style lang="scss" scoped>
.middleCard {
  width: 176px;
  border-radius: 10px;
  background-color: white;
  margin-bottom: 8px;

  .img {
    position: relative;
    margin-bottom: 8px;

    .countBox {
      position: absolute;
      bottom: 10px;
      left: 0;
      width: 86%;
      padding: 0 7%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      > div {
        font-size: 12px;
        color: white;
        display: flex;
        align-items: center;

        span {
          margin-left: 5px;
        }
      }
    }
  }

  .resource {
    height: 63px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 15px;
    padding-bottom: 8px;

    .title {
      font-size: 15px;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .buttom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #999;

      .username {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .icon {
        // width: 10px;
        height: 19px;
      }
    }
  }
}
</style>
